<template>
    <view class="bg-[#EAEAEA] min-h-screen">
        <view class="py-[30rpx] text-[34rpx] font-medium">
            <view class="text-center">xxxxxxxxxxxxxx班</view>
            <view class="flex justify-around mt-[20rpx]">
                <view>名册姓名：张三</view>
                <view>ID：X2313</view>
            </view>
        </view>

        <view class="bg-white  pt-[20rpx] pb-[20rpx]">
            <view class="text-[36rpx]  flex justify-around">
                <view @click="tabs = 0"
                    :class="tabs == 0 ? 'text-[#FD755D] border-b-[5rpx] border-[#FD755D] font-bold' : 'text-[#434141]'"
                    class="">基本信息</view>
                <view @click="tabs = 1"
                    :class="tabs == 1 ? 'text-[#FD755D] border-b-[5rpx] border-[#FD755D] font-bold' : 'text-[#434141]'"
                    class="  ">管理信息</view>
            </view>
            <template v-if="tabs == 0">
               
                <view class="px-[40rpx]">
                    <view class="mt-[30rpx]">姓名：张三</view>
                    <view class="mt-[30rpx]">性别：男</view>
                    <view class="mt-[30rpx]">民族：壮族</view>
                    <view class="mt-[30rpx]">出生年月：2020.10.1</view>
                    <view class="mt-[30rpx]">紧急联系人：赵四</view>
                    <view class="mt-[30rpx]">紧急联系人电话：13877779999</view>
                    <view class="mt-[30rpx]">住址：xxxxxxxxxxx</view>
               
                </view>
             
            </template>
            <template v-else-if="tabs == 1">
                <view class="mx-[40rpx]">
                    <view class="mt-[30rpx]">参加活动情况：</view>
                    <view class="mt-[20rpx] ml-2">xxxxxxx</view>
                    <view class="mt-[30rpx]">上门慰问情况：</view>
                    <view class="mt-[20rpx] ml-2">xxxxxxx</view>
                    <view class="mt-[30rpx]">随访记录情况：</view>
                    <view class="mt-[20rpx] ml-2">xxxxxxx</view>
                </view>


            </template>
        </view>
    </view>
</template>
<script setup>
import { ref } from "vue";
const tabs = ref(0)
</script>